<template>
  <div id="TodaysNews">
    <div class="News">
      <h2>今日要闻</h2>
      <ul>
        <li>
          <h3 style="font-size: 22px; font-weight: 700">
            <a
              href="https://new.qq.com/omn/20200612/20200612A0OFHH00.html"
              target="_blank"
              >微纪录片｜情牵“塞上江南”</a
            >
          </h3>
        </li>
        <li>
          <h3 style="font-size: 18px; font-weight: 700">
            <a
              href="https://new.qq.com/omn/20200613/20200613A066X300.html"
              target="_blank"
              >保护文化和自然遗产，这件事在习近平心中有多重？</a
            >
          </h3>
        </li>
        <li>
          <h3>
            <a
              href="https://new.qq.com/omn/TWF20200/TWF2020061300570200.html"
              target="_blank"
              >香港保安局前局长硬刚德媒 铜锣湾又现未经批准集结</a
            >
          </h3>
        </li>
        <li>
          <h3>
            <a
              href="https://new.qq.com/omn/20200613/20200613A0JHM900.html"
              target="_blank"
              >经济重启 疫情抬头 民众沦为政治牺牲品</a
            >
          </h3>
        </li>
        <li>
          <h3>
            <a
              href="https://new.qq.com/omn/20200612/20200612A0UJXS00.html"
              target="_blank"
              >美国政府限制部分中国留学人员赴美学习 教育部回应</a
            >
          </h3>
        </li>
      </ul>
    </div>
  </div>
  <!-- 无限滚动属性的div高度必须用100vh -->
  <div
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
    infinite-scroll-distance="10"
    id="main"
  >
    <h3>热点精选</h3>
    <ul>
      <li v-for="(item, index) in content" :key="index">
        <div class="Left">
          <a :href="item.link" class="Pic">
            <img :src="item.img" />
          </a>
        </div>
        <div class="Right">
          <div class="Title">
            <h3>
              <a :href="item.link" target="_blank">
                {{ item.title }}
              </a>
            </h3>
          </div>
          <div class="Info">
            <span>{{ item.author }}</span>
            <span>时间:{{ item.newDate }}</span>
          </div>
          <div class="Operation">
            <el-button
              icon="el-icon-edit"
              circle
              @click="Edit(item.id, item.title, item.author)"
            ></el-button>
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-error"
              iconColor="red"
              title="确定删除吗？"
              @confirm="DeleteNews(item.id)"
            >
              <template #reference>
                <el-button icon="el-icon-delete" circle></el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </li>
    </ul>
    <div
      v-loading="loading"
      style="height: 100px"
      v-show="loading"
      element-loading-text="加载中...."
    ></div>
  </div>
  <div
    class="Background_hide"
    @click.self="edit = !edit"
    :class="{ Background_show: edit }"
  >
    <transition name="fade">
      <form method="post" id="editInfo">

      
      <div class="edit_Page" :class="{ edit_Page_show: edit }">
        <span class="HeadTitle">修改信息</span
        ><span class="closeBut"><i class="el-icon-close"></i></span>
        <input ref="id" style="display: none" name="id" />
        <div class="insertArea">
          <div class="editBar">
            标题：<input class="textArea" name="title" type="text" ref="title" />
          </div>
          <div class="editBar">
            作者：<input class="textArea" name="author" type="text" ref="author" />
          </div>
        </div>
        <div class="buttonArea">
          <el-button @click="edit = !edit"><span>取消</span></el-button>
          <el-button
            type="primary"
            @click="SubmitLoading(id)"
            :loading="submitLoading"
            id="submitBut"
          >
            <span v-if="submitLoading">请稍后...</span>
            <span v-else>保存修改</span>
          </el-button>
        </div>
      </div>
      </form>
    </transition>
  </div>
</template>

<script>
import "../assets/css/ex.css";
export default {
  name: "MainContent",
  data() {
    return {
      items: 10,
      loading: false,
      content: [],
      edit: false,
      submitLoading: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData: async function () {
      try {
        let response = await fetch(
          "http://localhost/PHP_Pro01/NewsPostSystem/GetData.php"
        );
        let result = await response.json();
        console.log(result);
        this.content = result.slice(0, this.items);
      } catch (e) {
        console.log(e);
      }
    },
    load: function () {
      this.loading = true;
      console.log(this.loading);
      setTimeout(() => {
        this.items += 3;
        this.loading = false;
        this.getData();
        console.log(this.loading);
      }, 2000);
    },
    DeleteNews: async function (id) {
      try {
        let response = await fetch(
          "http://localhost/PHP_Pro01/NewsPostSystem/DeleteNews.php?id=" + id
        );
        let result = await response.json();
        console.log(result);
        if (result === "OK") {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.getData();
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "error",
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    Edit: async function (idI, titleI, authorI) {
      this.edit = true;
      let title = this.$refs.title;
      let author = this.$refs.author;
      let id = this.$refs.id;
      title.value = titleI;
      author.value = authorI;
      id.value = idI;
    },
    SubmitLoading: async function () {
      let data=new FormData(document.getElementById('editInfo'))
      let response = await fetch(
        "http://localhost/PHP_Pro01/NewsPostSystem/EditNews.php",{
          method:"POST",
          body:data
        }
      );
      let result = await response.json();
      console.log(result)
      this.submitLoading = true;
      setTimeout(() => {
        this.submitLoading = false;
        this.edit = !this.edit;
        this.$notify({
          title: "修改成功",
          message: "房屋信息已成功修改",
          type: "success",
        });
        this.getData()
      }, 2000);
    },
  },
  computed: {
    noMore: function () {
      return this.items >= 20;
    },
    disabled: function () {
      return this.loading || this.noMore;
    },
  },
  created() {
    console.log(this.$router);
    console.log(this.$route);
  },
};
import "../assets/css/NewContent.css";
</script>

<style scoped>
.Content {
  margin: 0 auto;
  width: 200px;
  height: 100px;
  background-color: rebeccapurple;
  margin-bottom: 20px;
  color: white;
  line-height: 100px;
}
</style>
